<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/lib/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/lib/validator/bootstrapValidator.min.css">
    <link rel="stylesheet" href="../assets/lib/toastr/toastr.min.css">
    <title>JQ的bootstrap的表单效验插件</title>
</head>
<body>
    <!-- 定义表单内容 -->
    <!-- 阻止默认提交 -->
    <form>
        <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" name="username" />
        </div>
        <div class="form-group">
            <label>Email address</label>
            <input type="text" class="form-control" name="email" />
        </div>
        <div class="form-group">
            <button type="submit" name="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
    <script src="../assets/lib/jquery-3.6.0.min.js"></script>
    <script src="../assets/lib/bootstrap/bootstrap.min.js"></script>
    <script src="../assets/lib/validator/bootstrapValidator.min.js"></script>
    <script src="../assets/lib/toastr/toastr.min.js"></script>
    <script>
        // 效验
        function test() {
            return {
                message: 'This value is not valid',
                feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
                },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        // noteEmpty 表示用户名不为空
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        }
                    }
                }
            }
            }
        }
        $('form').bootstrapValidator(test()).on('success.form.bv', function (e) {
            e.preventDefault()
            // alert('效验成功')
            toastr.info('提示信息');                // 普通提示
            toastr.success('提示信息');             // 成功提示
            toastr.warning('提示信息');             // 警告提示
            toastr.error('提示信息');               // 错误提示
        })
    
    </script>
    <script>
        // 提示框
        toastr.options = {
        // "closeButton": false,
        // "debug": false,
        // "newestOnTop": false,
        // "progressBar": false,
        positionClass: "toast-top-right", // 提示框位置，这里填类名
        // "preventDuplicates": false,
        // "onclick": null,
        showDuration: "300",              // 提示框渐显所用时间
        hideDuration: "300",              // 提示框隐藏渐隐时间
        timeOut: "2000",                  // 提示框持续时间
        // "extendedTimeOut": "1000",
        // "showEasing": "swing",
        // "hideEasing": "linear",
        // "showMethod": "fadeIn",
        // "hideMethod": "fadeOut"
        }
    </script>
</body>
</html>